<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="_token" content="{{ csrf_token() }}"/>
    <title>上海宏邦知识产权代理有限公司</title>
    <link rel="Shortcut Icon" href="{{asset('admin_assets/img/HB.ico') }}"/>
    <link rel="Bookmark" href="{{asset('admin_assets/img/HB.ico') }}" />
    <link rel="stylesheet" type="text/css" href="{{asset('admin_assets/css/bootstrap.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('admin_assets/css/font-awesome/css/font-awesome.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('admin_assets/css/AdminLTE.min.css')}}">
    <style>
        html body {
            margin: 0;
            height: 100%;
        }

        #body {
            width: 100%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: hidden;
            position: relative;
        }

        .clear {
            clear: both
        }

        #header {
            width: 100%;
            height: 60px;
            border-bottom: solid 1px #00a6ff;
            position: fixed;
            top: 0;
        }

        #header-left {
            width: 50%;
            height: 100%;
            min-width: 250px;
            font-size: 20px;
            color: #676767;
            float: left;
        }

        #header-left p {
            margin-top: 16px;
            margin-left: 30px;
        }

        #header-right {
            width: 50%;
            height: 100%;
            min-width: 120px;
            font-size: 20px;
            color: #676767;
            float: right;
        }

        #header-right p {
            font-size: 14px;
            text-align: right;
            margin-right: 10px;
            margin-top: 18px;
            min-width: 125px;
            color: #676767;
        }

        #header-right p a {
            color: #676767;
        }

        #content {
            width: 100%;
            margin-top: 60px;
        }

        #steps {
            height: 48px;
            border-bottom: 2px solid #e6e6e6;
            position: relative;
        }

        #steps ul {
            width: 500px;
            margin: 0 auto;
        }

        .span-title {
            list-style: none;
            width: 150px;
            line-height: 46px;
            text-align: center;
            float: left;
            font-size: 16px;
            color: #999;
        }

        .active {
            border-bottom: solid 2px #0080ff;
        }

        .content-title {
            text-align: center;
            margin-top: 2%;
            font-size: 16px;
            color: #676767;
        }

        .new-password {
            margin: 1% auto;
            width: 25%;
            border-radius: 5px;
        }

        .require-password {
            margin: 1% auto;
            width: 25%;
            border-radius: 5px;
        }

        .click-btn {
            float: left;
            border-radius: 5px;
            width: 23%;
            height: 34px;
            border: none;
            outline: none;
            color: black;
        }

        #btn-confirm {
            width: 25%;
            height: 34px;
            border: none;
            border-radius: 5px;
            background: #0080ff;
            color: white;
            outline: none;
            margin-top: 1%;
            margin-left: 37.5%;
        }

        #footer {
            width: 100%;
            margin: 0;
            position: fixed;
            bottom: 0;
            height: 120px;
        }
        #footer_title {
            width: 100%;
            text-align: center;
            bottom: 5px;
            position: fixed;
            color: #a8a8a9;
        }
        .error{
            color: #d90003;
            margin-left: 38%;
            display: none;
        }
        .success{
           color: #0ac454;
           margin-left: 38%;
        }
    </style>
</head>
<body>
<div id="body">
    <div id="header">
        <div id="header-left"><p>IP管理系统</p></div>
        <div id="header-right"><p><a href="{{url('/')}}">已有账号,立即登录</a></p></div>
    </div>
    <div id="content">
        <div class="row" style="margin-top: 4%">
            <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 col-lg-offset-2 col-md-offset-2">
                <h4 style="font-size: 20px"><i class="fa fa-edit fa-lg" style="color: #0080ff"></i>&nbsp;&nbsp;用户注册</h4>
            </div>
        </div>
        <div class="row" style="margin-top: 1%">
            <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 col-lg-offset-2 col-md-offset-2" id="steps">
                <ul>
                    <li class="span-title"><b>验证手机</b></li>
                    <li class="span-title"><b>设置账号信息</b></li>
                    <li class="span-title active"><b>设置密码</b></li>
                </ul>
            </div>
        </div>
        <div class="row" style="margin-top: 3%">
            <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 col-lg-offset-2 col-md-offset-2">
                <p class="content-title"><b>设置密码</b></p>
            </div>
        </div>
        <form action="{{url('user/register/doRegister')}}" method="post" enctype="multipart/form-data" onsubmit="return check();">
        {{csrf_field()}}
            <input name="tel" type="hidden" value="{{$data['hide_tel']}}">
            <input name="type" type="hidden" value="{{$data['user_type']}}">
            <input name="account" type="hidden" value="{{$data['user_name']}}">
            <input name="name" type="hidden" value="{{$data['real_name']}}">
            <input name="code_num" type="hidden" value="{{$data['code_num']}}">
            <input name="address" type="hidden" value="{{$data['address']}}">
            <input name="company" type="hidden" value="{{$data['company']}}">
            <input name="email" type="hidden" value="{{$data['user_email']}}">
            <input name="file" type="hidden" value="{{$data['file']}}">
            <div class="row" style="margin-top: 1%">
            <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 col-lg-offset-2 col-md-offset-2">
                <input type="password" class="form-control new-password" name="pwd" id="pwd" placeholder="密码" onblur="check_pwd();" oninput="check_pwd_strength();" onclick="check_pwd_strength()" data-container="body" data-toggle="popover">
                <input type="hidden" id="hide_pwd_strength" value="">
                <span id="error_empty_pwd" class="error">
                                <i class="fa fa-times-circle"></i>请填写密码</span>
                <span id="error_type_pwd" class="error">
                                <i class="fa fa-times-circle"></i>密码设置不符合要求</span>
                <span id="success_pwd" class="success"><i class="fa fa-check-circle"></i><span style="color:#323233">强度:</span><span id="success_pwd_length"></span></span>
            </div>
        </div>
        <div class="row" style="margin-top: 1%">
            <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 col-lg-offset-2 col-md-offset-2">
                <input type="password" class="form-control require-password" name="require_pwd" id="require_pwd" placeholder="确认密码" onblur="check_require();">
            <span id="error_empty_require_pwd" class="error">
                                <i class="fa fa-times-circle"></i>请填写确认密码</span>
                <span id="error_require_pwd" class="error">
                                <i class="fa fa-times-circle"></i>两次输入密码不相同</span>
            </div>
        </div>
        <div class="row" style="margin-top: 1%">
            <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 col-lg-offset-2 col-md-offset-2">
                <button id="btn-confirm"  type="submit">确定</button>
            </div>
        </div>
            </form>
    </div>
    <div id="footer">
        <p id="footer_title">Copyright &copy; 2018 <a style="color: #A8A8A9" href="http://www.hongbung.com" target="_blank">上海宏邦知识产权代理有限公司</a></p>
    </div>
</div>
<script src="{{asset('admin_assets/js/jquery.min.js')}}"></script>
<script src="{{asset('admin_assets/js/bootstrap.min.js')}}"></script>
<script src="{{asset('js/ip.js')}}"></script>
<script>
    var res;
    $(function () {
        $('#pwd').popover(
                {
                    trigger:'focus',
                    placement: 'right',
                    content: '<div id="body_content"><div id="box_strength"><p id="text_strength">强度&nbsp;:</p><p id="color_strength_3" class="color_strength"></p><p id="color_strength_2" class="color_strength"></p><p id="color_strength_1" class="color_strength"></p></div><div class="clear"></div><div id="box_length"><i class="fa fa-genderless fa-lg" id="icon1" style="color: #9a9a9c"></i><span class="text_require">密码为6~12位</span></div><div id="box_pwd_content"><i class="fa fa-genderless fa-lg" id="icon2" style="color: #9a9a9c"></i><span class="text_require">字母,数字和标点符号至少包含2种</span></div><div id="box_pwd_type"><i class="fa fa-genderless fa-lg" id="icon3" style="color: #9a9a9c"></i><span class="text_require">有大写字母</span></div></div>',

                    html: true
                }
        );
    });
    //    flag是标志位，第一条错误为flag1=1，以此类推,正确对应flag为0,全部正确为最强密码.
    function check_pwd_strength() {
        var pwd=$("#pwd").val(),flag1,flag2,flag3;
        var reg1 = /^[a-zA-Z0-9,.'"@!#$%^&*()/?;]*$/;
        var reg2=/((?=.*[a-z])(?=.*\d)|(?=[a-z])(?=.*[#@!~%^&*])|(?=.*\d)(?=.*[#@!~%^&*]))[a-z\d#@!~%^&*]{6,12}/i;
        var reg3=/([A-Z])+/;
        if(pwd.length>=0&&pwd.length<=5){
            flag1=1;
        }
        if(!reg1.test(pwd)){
            flag1=1;
        }
        if(pwd.length>=6&&reg1.test(pwd)) {
            flag1=0;
        }
        if(!reg2.test(pwd)){
            flag2=1
        }else {
            flag2=0;
        }
        if(!reg3.test(pwd)){
            flag3=1;
        }else {
            flag3=0;
        }
        if(flag1==1){
            $("#icon1").attr("class","fa fa-close fa-lg");
            $("#icon1").css('color','red');
        }else{
            $("#icon1").attr("class","fa fa-check fa-lg");
            $("#icon1").css('color','#26f309');
        }
        if(flag2==1){
            $("#icon2").attr("class","fa fa-close fa-lg");
            $("#icon2").css('color','red');
        }else {
            $("#icon2").attr("class", "fa fa-check fa-lg");
            $("#icon2").css('color','#26f309');
        }
        if(flag3==1){
            $("#icon3").attr("class", "fa fa-close fa-lg");
            $("#icon3").css('color','red');
        }else {
            $("#icon3").attr("class", "fa fa-check fa-lg");
            $("#icon3").css('color','#26f309');
        }
        if(flag1==0||flag2==0||flag3==0){
            $(".color_strength").css('background','#cccccf');
            $("#color_strength_1").css('background','#ef1000');
            $("#hide_pwd_strength").attr('value',1);
        } if((flag1==0&&flag2==0)||(flag1==0&&flag3==0)||(flag2==0&&flag3==0)){
            $(".color_strength").css('background','#cccccf');
            $("#color_strength_1").css('background','#ef6000');
            $("#color_strength_2").css('background','#ef6000');
            $("#hide_pwd_strength").attr('value',2);
        } if(flag1==0&&flag2==0&&flag3==0){
            $(".color_strength").css('background','#cccccf');
            $("#color_strength_1").css('background','#26f309');
            $("#color_strength_2").css('background','#26f309');
            $("#color_strength_3").css('background','#26f309');
            $("#hide_pwd_strength").attr('value',3);
        }
        if(flag1!=0&&flag2!=0&&flag3!=0){
            $("#hide_pwd_strength").attr('value',0);
        }
    }
    function check_pwd() {
        var pwd=$("#pwd").val();
        var pwd_strength=$("#hide_pwd_strength").val();
        if(pwd.length==0){
            $(".error").css('display','none');
            $(".success").css('display','none');
            $("#error_empty_pwd").css('display','block');
            $("#btn-confirm").attr('disabled',true);
        }
        else {
            check_pwd_strength();
            $(".error").css('display','none');
            $("#btn-confirm").attr('disabled',false);
        }
        if(pwd_strength==0){
            $(".error").css('display','none');
            $(".success").css('display','none');
            $("#error_type_pwd").css('display','block');
            $("#btn-confirm").attr("disabled", true);
        }
        if(pwd_strength==1){
            check_pwd_strength();
            $(".error").css('display','none');
            $("#success_pwd").css('display','block');
            $("#success_pwd_length").text("弱");
            $("#success_pwd_length").css('color','red');
            $("#btn-confirm").attr("disabled", false);
        }
        if(pwd_strength==2){
            check_pwd_strength();
            $(".error").css('display','none');
            $("#success_pwd").css('display','block');
            $("#success_pwd_length").text("中");
            $("#success_pwd_length").css('color','#ef6000');
            $("#btn-confirm").attr("disabled", false);
        }
        if(pwd_strength==3){
            check_pwd_strength();
            $(".error").css('display','none');
            $("#success_pwd").css('display','block');
            $("#success_pwd_length").text("强");
            $("#success_pwd_length").css('color','#26f309');
            $("#btn-confirm").attr("disabled", false);
        }
    }
    function check_require() {
        var pwd=$("#pwd").val();
        var require_pwd=$("#require_pwd").val();
        if(require_pwd.length==0){
            $(".error").css('display','none');
            $("#error_empty_require_pwd").css('display','block');
            $("#btn-confirm").attr('disabled',true);
        }else if(pwd!=require_pwd) {
            $(".error").css('display','none');
            $("#error_require_pwd").css('display','block');
            $("#btn-confirm").attr('disabled',true);
        }else {
            $(".error").css('display','none');
            $("#btn-confirm").attr('disabled',false);
        }
    }
    function check() {
        var pwd=$("#pwd").val();
        var require_pwd=$("#require_pwd").val();
        if(pwd.length==0){
            alert('请填写密码');
            return false;
        }else if(require_pwd.length==0){
            alert('请填写确认密码');
            return false;
        }else {
            return true;
        }
    }
</script>
</body>
</html>
